<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" @click="AddressShow = true" />

    <!-- 商品卡片 -->
    <van-card v-for="item in product" :thumb="item.products.thumb_text" :num="item.pronum" @click-thumb="ToProduct(item.proid)">
        <template #title>
            <div class="title">{{item.products.name}}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag v-for="(attr, index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
        </template>
        <template #desc v-else>
            <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
            <div class="price">单价：￥{{item.price}}</div>
        </template>

        <template #price>
            <div class="price">合计：￥{{item.total}}</div>
        </template>

        <template #footer v-if="order.status >= '3'">
            <van-button type="warning" size="small" @click="CommentChange(item)">
                {{item.status ? '查看评价' : '立即评价'}}
            </van-button>
        </template>
    </van-card>

    <!-- 订单信息 -->
    <van-cell title="订单号" :value="order.code" />
    <van-cell title="订单总价" :value="`￥${order.amount}`" />
    <van-cell title="支付方式" :value="order.pay_text" />
    <van-cell title="订单状态" :value="order.status_text" />
    <!-- <van-cell title="优惠金额" value="￥20元" /> -->
    <van-cell title="下单时间" :value="order.createtime_text" />
    <van-cell title="订单描述" :value="order.remark" />

    <!-- 操作按钮组 -->
    <div class="actions">
        <van-button square hairline type="primary" size="large">在线客服</van-button>

        <van-button v-if="order.status == '1'" square hairline type="danger" size="large">申请退款</van-button>

        <van-button v-if="order.status == '2'" square hairline type="success" size="large">确认收货</van-button>
        <van-button v-if="order.status == '2'" square hairline type="warning" size="large">物流详情</van-button>
    </div>

    <!-- 弹出层 -->
    <van-popup
        v-model:show="AddressShow"
        position="bottom"
        round
        style="height: 40%; padding-top: 4px;"
    >
        <van-form>
            <van-field 
                v-model="address.consignee"
                label="收件人"
                readonly
            />
            <van-field 
                v-model="address.mobile"
                label="手机号码"
                readonly
            />
            <van-field 
                v-model="address.region_text"
                label="所在地区"
                readonly
            />
            <van-field 
                v-model="address.address"
                label="详细地址"
                readonly
            />
            <van-field 
                v-model="address.status_text"
                label="是否默认地址"
                readonly
            />
            <div style="width:50%;margin:2em auto 0em;">
                <van-button round block type="primary" @click="AddressShow = false">关闭</van-button>
            </div>
        </van-form>
    </van-popup>

    <!-- 评论弹出层 -->
    <van-popup
        v-model:show="CommentShow"
        position="bottom"
        round
        style="height: 80%; padding-top: 4px;"
    >
        <van-form @submit="submit">
            <van-field 
                label="评论内容"
                type="textarea"
                rows="3"
                v-model="comment.comment"
                placeholder="请输入评论内容"
                :rules="[
                    {required: true, message: '请输入评论内容'},
                ]"
                :readonly="comment.status"
            />

            <van-field label="评分">
                <template #input>
                    <van-rate v-model="comment.rate" :readonly="comment.status" />
                </template>
            </van-field>

            <van-field label="上传图集">
                <template #input>
                    <van-uploader 
                        v-model="thumbs" 
                        multiple 
                        :max-count="8"
                        :readonly="comment.status"
                        :deletable="!comment.status"
                    />
                </template>
            </van-field>

            <div style="width:50%;margin:2em auto;">
                <van-button v-if="comment.status" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" @click="CommentShow = false">关闭弹框</van-button>
                <van-button v-else round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交评价</van-button>
            </div>
        </van-form>
    </van-popup>
</template>

<script setup>
    const {proxy} = getCurrentInstance()

    let business = proxy.$business
    let orderid = proxy.$route.query.orderid ?? 0
    let order = ref({})
    let product = ref([])


    let address = ref({})
    let AddressShow = ref(false)

    // 评论
    let CommentShow = ref(false)
    let comment = ref({id: 0, rate: 0, comment: '', status: false})
    let thumbs = ref([])


    onBeforeMount(() => OrderInfo())

    const OrderInfo = async () =>
    {
        var result = await proxy.$POST({url: '/order/info', params: {orderid}})

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        order.value = result.data.order
        product.value = result.data.product
        address.value = result.data.address
        
        product.value.map(item => {

            //给商品追加一个自定义属性 用于判断是否有无评价
            //根据评论时间来判断是否有评价过
            item.status = item.comtime ? true : false

            // 转换商品规格
            item.attrs = JSON.parse(item.attrs)
        })
    }

    //切换评价
    const CommentChange = async (product) =>
    {
        //订单商品表的id
        comment.value.id = product.id

        comment.value = {
            id: product.id,
            rate: parseInt(product.rate),
            comment: product.comment,
            status: product.status
        }

        //上传图片的
        var list = []
        product.thumbs_text.map(url => {
            list.push({url})
        })
        thumbs.value = list

        CommentShow.value = true
    }

    // 提交评价
    const submit = async (values) =>
    {
        var params = {
            id: comment.value.id,
            comment: comment.value.comment,
            rate: comment.value.rate
        }

        //判断图片的个数
        if(thumbs.value.length > 0)
        {
            var list = []

            //图片追加到数组中
            thumbs.value.map(item => (item.file && list.push(item.file)))
            params.thumbs = list
        }

        if(params.thumbs)
        {
            //多图上传
            var result = await proxy.$UPLOADS({url: '/order/comment', params})
        }else
        {
            //POST方式提交
            var result = await proxy.$POST({url: '/order/comment', params})
        }

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        OrderInfo()

        // 关闭弹框
        CommentShow.value = false

        //修改订单商品的数据信息
        proxy.$success(result.msg)
    }
















    const ToProduct = (proid) => proxy.$router.push({path: '/product/info', query: {proid}})
</script>

<style scoped>
    @import url('/assets/css/OrderInfo.css');
</style>